Published 2022-05-06

Next.js - Meta Data

在 Next.js 中，我们可以通过 Head 组件修改每个react页面的头信息。

修改index.js

import Link from 'next/link'
import Head from 'next/head'

function HomePage() {
  return (
    <>
      <Head>
        <title>Welcome to Next.js!</title>
      </Head>
      <div>Welcome to Next.js!</div>
      <Link href="/posts/first">
        <a>First Post</a>
      </Link>
      <br />
      <img src="/logo.png" alt="TutorialsPoint Logo" />
    </>
  )
}

export default HomePage

修改first.js

import Link from 'next/link'
import Head from 'next/head'

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>My First Post</title>
      </Head>
      <h1>My First Post</h1>
      <h2>
        <Link href="/">
          <a>Home</a>
        </Link>
      </h2>
    </>
  )
}

启动服务

npm run dev

Manon.icu

I'm here to make you a better developer by teaching you everything I know about building for the web.

Next.js - Meta Data

Comments